import React from "react"
import styles from "./index.module.scss"

export function renderValueColor_FCP(value: number) {
    if (value >= 0 && value <= 1800) {
        return <span className={styles["low-latency"]}>{value} ms</span>
    } else if (value > 1800 && value <= 3000) {
        return <span className={styles["mid-latency"]}>{value} ms</span>
    } else if (value > 3000) {
        return <span className={styles["high-latency"]}>{value} ms</span>
    } else {
        return <span>暂无数据</span>
    }
}

export function renderValueColor_LCP(value: number) {
    if (value >= 0 && value <= 2500) {
        return <span className={styles["low-latency"]}>{value} ms</span>
    } else if (value > 2500 && value <= 4000) {
        return <span className={styles["mid-latency"]}>{value} ms</span>
    } else if (value > 4000) {
        return <span className={styles["high-latency"]}>{value} ms</span>
    } else {
        return <span>暂无数据</span>
    }
}

export function renderValueColor_INP(value: number) {
    if (value >= 0 && value <= 200) {
        return <span className={styles["low-latency"]}>{value} ms</span>
    } else if (value > 200 && value <= 500) {
        return <span className={styles["mid-latency"]}>{value} ms</span>
    } else if (value > 500) {
        return <span className={styles["high-latency"]}>{value} ms</span>
    } else {
        return <span>暂无数据</span>
    }
}

export function renderValueColor_TTFB(value: number) {
    if (value >= 0 && value <= 500) {
        return <span className={styles["low-latency"]}>{value} ms</span>
    } else if (value > 500 && value <= 1500) {
        return <span className={styles["mid-latency"]}>{value} ms</span>
    } else if (value > 1500) {
        return <span className={styles["high-latency"]}>{value} ms</span>
    } else {
        return <span>暂无数据</span>
    }
}

export function renderValueColor_CLS(value: number) {
    // 扩大了10000倍
    if (value >= 0 && value <= 1000) {
        return <span className={styles["low-latency"]}>{value}</span>
    } else if (value > 1000 && value < 2500) {
        return <span className={styles["mid-latency"]}>{value}</span>
    } else if (value >= 2500) {
        return <span className={styles["high-latency"]}>{value}</span>
    } else {
        return <span>暂无数据</span>
    }
}
